<template>
  <div>

    <el-button type="primary" @click="dialogFormVisible = true">提交</el-button>
    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
    prop="thesisId"
    label="序号"

    >
  </el-table-column>
  <el-table-column
  prop="thesisTitle"
  label="论文题目"
>
</el-table-column>
<el-table-column
prop="thesisDate"
label="提交日期"
:formatter="dateFormat"
>
</el-table-column>
<el-table-column
prop="thesisState"
label="状态"
:formatter="checkState"
>
</el-table-column>
<!--
<el-table-column label="操作">
  <template slot-scope="scope">
      <el-button v-if="scope.row.thesisState=='未提交'" type="primary" @click="dialogFormVisible = true">提交</el-button>
      <el-button v-if="scope.row.thesisState=='待审核'" type="primary" >已提交</el-button>
  </template>
</el-table-column> -->

</el-table>

<el-dialog title="论文提交" :visible.sync="dialogFormVisible">
<el-upload
  class="upload-demo"
  ref="upload"
  multiple
  :onError="uploadError"
  :onSuccess="uploadSuccess"
  :beforeUpload="beforeAvatarUpload"
  :action="importFileUrl"
   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传pdf,doc,docx,ppt,pptx文件，且不超过10M</div>
</el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
<div class="block">
  <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="pageIndex"
  :page-size="pageSize"
  layout="prev, pager, next, jumper"
  :total="total">
</el-pagination>
</div>
</div>
</template>

<script>
//导入api接口
import { showThesisByPage , add} from '@/axios/api'
import { formatDate } from "@/common/js/date.js"
export default {
  data() {
    return {
      importFileUrl: "/api/student/thesis/add",//上传文件的接口
      pageIndex:1,
      total:20,
      pageSize:10,
      tableData: [],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    };
  },
  methods: {
    //文件上传
    // 上传成功后的回调
        uploadSuccess : (response, file, fileList) => {
          console.log("this-----" + this);
          alert("提交成功")
        },
        // 上传错误
        uploadError :(response, file, fileList) => {
          // this.$message({
          //   message:"提交出错了",
          //   type: "success"
          // })
          alert("提交出错了")
        },
        // 上传前对文件的大小的判断
        beforeAvatarUpload (file) {
          const extension2 = file.name.split('.')[1] === 'pdf'
          const extension3 = file.name.split('.')[1] === 'doc'
          const extension4 = file.name.split('.')[1] === 'docx'
          const extension5 = file.name.split('.')[1] === 'ppt'
          const extension6 = file.name.split('.')[1] === 'pptx'
          const isLt0M = file.size / 1024 / 1024 > 0
          const isLt10M = file.size / 1024 / 1024 < 10
          if (!extension2 && !extension3 && !extension4 && !extension5 && !extension6) {
            this.$alert('上传模板只能是pdf、doc、docx、ppt、pptx 格式!', '温馨提示：', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${ action }`
                  });
                }
              });
            }
          if (!isLt10M) {
            this.$alert('上传文件大小不能超过 10MB!', '温馨提示：', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: '请重新上传'
                  });
                }
              });
          }
          if (!isLt0M) {
            this.$alert('上传文件大小不能为0M!', '温馨提示：', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: '请重新上传'
                  });
                }
              });
          }
          return extension2 || extension3 || extension5 || extension6|| extension4 && isLt10M && isLt0M
        },
        // 文件上传组件
        submitUpload() {
            this.$refs.upload.submit();
            // this.saveThesis();
            this.getThesisList();
        },
    //时间格式化
    dateFormat:(row, column) => {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return formatDate(new Date(date),'yyyy-MM-dd');
    },
  handleSizeChange: function(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange :function(val) {
    console.log(`当前页: ${val}`);
    this.pageIndex = parseInt('${val}');
    this.getThesisList();
  },
  checkState:function(row,column){
    var state = row.thesisState;
    if(state == 0){
      return "未提交";
    }
    if(state == 1){
      return "待审核";
    }
    if(state == 2){
      return "已审核";
    }
  },
  handleChange(file, fileList) {
        this.fileList3 = fileList.slice(-5);
      },
  getThesisList:function() {
    let param = {pageIndex: this.pageIndex}
    showThesisByPage(param).then(res => {
      //this.goPage(this.pageIndex);
        this.tableData = res.resData.list;
      this.total = res.resData.total;
      this.pageSize = res.resData.pageSize;

    })
  }
},

  //页面首次进入执行的方法
  mounted() {
    this.getThesisList();
  }
}
</script>
